*{
    margin: 0;
    padding: 0;
}
@total-width:750;
// @center-width:693/40rem;
.w{
    width: (693/40rem);
    margin:0 auto;
}
html{
    font-size: (100vw/@total-width * 40);
    background-color: #eff0f4;
}

a{
    text-decoration: none;
}
// 设置弹性盒
.top-bar:extend(.w){
    display:flex;
    // height: 175/40rem;
    height: (175/40rem);
    line-height: (175/40rem);
    // 设置对齐方式
    justify-content: space-between;
    // 设置辅轴对齐方式
    align-items: center;
    // border: orange 1px solid;
    a{
        color: #24253d;
        font-size: (50/40rem);
        i{
            color: #999;
            font-size:(40/40rem);
        }
    }
}
.banner:extend(.w){
    img{
width: 100%;
    }
}
// 设置中间菜单
.menu:extend(.w){
    height:(329/40rem);
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: space-around;
    width: 100%;
    a{
        width:(327/40rem);
        height: (104/40rem);
        color:white;
        border-radius: (10/40rem);
        line-height:(104/40rem);
        i{
            margin: 0 (20/40rem) 0 (38/40rem);
        }
    }
    .course{
        background-color:#f97053 ;
    }
    .star{
        background-color:#cd6efe ;
    }
    .sub{
        background-color:#f97053 ;
    }
    .download{
        background-color:#1bc4fb ;
    }

}
// 设置更多课程列表样式
.course-list:extend(.w){
    height: (394/40rem);
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    // margin: 0 (12/40rem);
    margin-bottom: (46/40rem);
    

   .title:extend(.w){
    display: flex;
    justify-content: space-between;
    align-items: center;
    // align-content: space-around;
    h2{
        font-size: (33/40rem);
        color:#24253d;
        border-left: (3/40rem) #3a84ff solid;
        padding-left: (4/40rem);
        // margin: 0 (14/40rem);
    }
    a {
        font-size:(28/40rem);
        color:#656565;
    }
}
}
.item-list{
    width:(720/40rem);
    display: flex;
    overflow: auto;
}
.item{
    flex:none;
    box-sizing: border-box;
    width:(320/40rem);
    height:(324/40rem);
    padding:0 (22/40rem);
    background-color: #fff;
    box-shadow: 0 0 (10/40rem) rgba(0,0,0,0.3);
    border-radius: (5/40rem);
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    margin-right: (24/40rem);
}
// .cover{
//     margin: 0 (14/40rem);
// }
img{
    width: 100%;
    vertical-align: top;
}
.course-title{
    font-size: (32/40rem);
    color:#24253d;
}
.user-info{
    display: flex;
    align-items: center;
}
.avatar{
    width:(42/40rem);
    height: (42/40rem);
}
.nickname{
    margin-left: (6/40rem);
    font-size: (24/40rem);
    color:#969393;
}
